<template>
	<view class="sign_box">
		<view class="title">只显示一周日期的签到</view>
		<view class="calendar_box">
			<ker-sign-in 
				:rewardData="rewardData" 
				:todayDate ="todayDate"
				:continueDays="continueDays"
				:bgImg="bgImg"
				:bgImgActive="activeImg"
				:isBgImg="true"
				@sign="callBackFn"
				:styleObj="styTarget"
			></ker-sign-in>
			</view>
	</view>
</template>

<script>
	import kerSignIn from '@/components/ker-sign-in/ker-sign-in'
	export default {
		components:{ kerSignIn },
		data() {
			return {
				todayDate: '08-03',  //今天日期，，后台返回数据
				continueDays: 4,  //连续签到天数，后台返回数据
				//7天对应的奖励数据，后台返回数据
				rewardData: [
					{id: 0, date: '07-30', reward: '1元', sign: true },
					{id: 1, date: '07-31', reward: '5元', sign: true },
					{id: 2, date: '08-01', reward: '10元', sign: true},
					{id: 3, date: '08-02', reward: '20元', sign: true},
					{id: 4, date: '08-03', reward: '40元', sign: false},
					{id: 5, date: '08-04', reward: '60元', sign: false},
					{id: 6, date: '08-05', reward: '100元', sign: false}
				],
				
				bgImg: 'https://img2.baidu.com/it/u=7367332,830171692&fm=26&fmt=auto&gp=0.jpg',
				activeImg: 'https://img0.baidu.com/it/u=3024945662,1704249812&fm=26&fmt=auto&gp=0.jpg',
				styTarget: {
						background: 'none',
						color: '#0885EE'
				}
			}
		},
		methods: {
			callBackFn(data) {
				console.log(data)
				setTimeout(()=>{   //模拟接口
					this.rewardData = this.rewardData.map(e => {
						if (e.date === data.todays) {
							e.sign = true
						}
						return e;
					})
					this.continueDays++;
					uni.showToast({
						title:'恭喜获得'+ data.rewards +'奖励',
						icon: 'none'
					})
				},1500)
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.sign_box{
		padding: 60rpx 0 0;
	
		.calendar_box{
				background: #eee;
				padding: 20rpx ;
				box-sizing: border-box;
		}
		.title{
			margin: 0 auto 40rpx;
			text-align: center;
		}
	}
</style>
